import { useEffect, useState } from 'react'
import { Typography, Card } from 'antd'
import { useTranslation } from 'react-i18next'
import { ipcService } from '../../api/service'
import type { VideoInfo, DownloadProgress, HomePageConfig } from '../../api/service'
import VideoList from '../../components/video/VideoList'
import './VideoPage.css'

const { Title } = Typography

function VideoPage() {
  const { t } = useTranslation()
  const [videos, setVideos] = useState<VideoInfo[]>([])
  const [downloadProgress, setDownloadProgress] = useState<Record<string, DownloadProgress>>({})
  const [selectedProfile, setSelectedProfile] = useState<HomePageConfig | null>(null)

  useEffect(() => {
    const removeResultListener = ipcService.onCrawlResult((result: any) => {
      setVideos(result.videos || [])
      setSelectedProfile(result.profile || null)
    })

    const removeDownloadListener = ipcService.onDownloadProgress((progress: DownloadProgress) => {
      setDownloadProgress(prev => ({ ...prev, [progress.id]: progress }))
    })

    return () => {
      removeResultListener()
      removeDownloadListener()
    }
  }, [])

  return (
    <div className="page-container">
      <div className="video-header">
        <Title level={3} className="video-page-title">
          {t('videoPage.title')}
        </Title>
        {selectedProfile && (
          <Typography.Text type="secondary" className="video-page-summary">
            {t('videoPage.summary', {
              name: selectedProfile.name,
              count: videos.length
            })}
          </Typography.Text>
        )}
      </div>

      <Card className="content-card">
        <VideoList
          videos={videos}
          downloadProgress={downloadProgress}
        />
      </Card>
    </div>
  )
}

export default VideoPage


